import React, { useState }from 'react';
import { Typography } from 'antd';
import { CalculatorOutlined } from '@ant-design/icons';
import TopMenu from '../../../components/layout/TopMenu';
import TunnelStatistic from './subpages/TunnelStatistic';


const { Title } = Typography;

const TunnelPage: React.FC = () => {
  const [currentMenuKey, setCurrentMenuKey] = useState('tunnel-lenth');

  // 顶部菜单配置
  const topMenuItems = [
    {
      key: 'tunnel-lenth',
      label: '隧道长度',
    },
    {
      key: 'crossing',
      label: '衬砌计算',
    },
    {
      key: 'statistics',
      label: '统计',
    },
  ];

  const handleMenuClick = (key: string) => {
    setCurrentMenuKey(key);
  };


  return (
    <div>
      <Title level={2}>
        <CalculatorOutlined /> 隧道计算
      </Title>
      
      <div style={{ marginBottom: '24px', overflow: 'hidden' }}>
        <TopMenu 
          currentKey={currentMenuKey}
          onChange={handleMenuClick}
          items={topMenuItems}
        />
      </div>

      {currentMenuKey === 'tunnel-lenth' && (
        <TunnelStatistic />
      )}



    </div>
  );
};

export default TunnelPage;